<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程订单列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <style>
        .headerCenter{
            margin-top: 10px;
            margin-left: 20px;
            width: 100%;
        }
        .backColor{
            background-color: #F1F1F1;
        }
        .btnRight{
            float: right;
        }
        .btnLeft{
            float: left;
        }
        .acolor{
            color: #009688;
        }
        .layui-input{
            width: 144%;
        }
        .layui-form-select .layui-input{
            margin-right: 50px;
        }
        .layui-form-select .layui-edge{
            right: -27%;
        }

        .fontsize{
            margin-left: 60px;
        }
        .layui-form-select dl{
            width: 182.88px;
        }
        .default{
            background-color: #009688;
        }
    </style>
</head>
<body>
    <div class="layui-row" >
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    课程订单列表
                    <div class="btnRight" style="margin-bottom: 10px">
                        <button onclick="refresh()" type="button" class="layui-btn layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-refresh-1"></i>
                            刷新
                        </button>
                        <button onclick="backOff()" type="button" class="layui-btn layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-return"></i>
                            返回
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" >
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <div id="btn" class="btnLeft" style="margin-bottom: 10px">
                        <button type="button" class="default layui-btn layui-btn-sm  layui-btn-primary">
                            未付款(<span></span>)
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary">
                            已付款(<span></span>)
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!--筛选查询-->
<div class="layui-row">
    <div class="layui-col-md11">
        <div class="layui-card headerCenter">
            <div class="layui-card-header backColor">
                <i class="layui-icon">&#xe615;</i>
                筛选查询
               <!-- <button onclick="accurate()" class="btnRight layui-btn">
                    <i class="layui-icon layui-icon-down"></i>
                    收起筛选
                </button>-->
            </div>
            <div class="layui-card-body">
                <form class="layui-form" >
                    <div class="layui-form-item">
                        <div class="floa">
                            <label class="layui-form-label fontsize">支付渠道：</label>
                            <div class="layui-input-inline inp" style="width: 127px; margin-right: 20px">
                                <select id="paymentChannel" lay-verify="required" lay-filter="orderPaymentChannel" >
                                    <option value="0">请选择</option>
                                    <option value="2">微信支付</option>
                                    <option value="3">余额支付</option>
                                </select>
                            </div>
                        </div>

                        <!--<div class="floa">
                            <label class="layui-form-label fontsize">订单状态：</label>
                            <div class="layui-input-inline  inp" style="width: 127px; margin-right: 20px">
                                <select id="orderStatus" lay-verify="required" lay-filter="orderStatus" >
                                    <option value="0">请选择</option>
                                    <option value="2">未付款</option>
                                    <option value="3">已付款</option>
                                    <option value="4">待发货</option>
                                    <option value="5">已发货</option>
                                    <option value="6">已签收</option>
                                    <option value="7">退货申请</option>
                                    <option value="8">退货中</option>
                                    <option value="9">已退货</option>
                                    <option value="10">取消交易</option>
                                </select>
                            </div>
                        </div>-->

                        <div class="floa">
                            <label class="layui-form-label fontsize">订单来源：</label>
                            <div class="layui-input-inline inp" style="width: 127px; margin-right: 20px">
                                <select id="orderSource" lay-verify="required" lay-filter="orderSource" >
                                    <option value="0">请选择</option>
                                    <option value="2">小程序</option>
                                    <option value="3">app</option>
                                </select>
                            </div>
                        </div>

                        <span style="float:right;">
                                <button onclick="selProduct()" type="button" class="layui-btn layui-btn layui-btn-sm">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button onclick="reset()" type="button" class="layui-btn layui-btn-warm layui-btn layui-btn-sm">
                                    <i class="layui-icon layui-icon-refresh-1"></i> 重置
                                </button>
                            </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="layui-col-md11" style="margin-left: 19px">
    <table id="demo" lay-filter="test"></table>
</div>
<!--商品id-->
<input type="hidden" id="proId"/>



<script>
    /*支付渠道*/
    var orderPaymentChannel;
    /*订单状态*/
    var orderStatus;
    /*订单来源*/
    var orderSource;

    function backOff() {
        var arr = localStorage.getItem("numArr");
        var numArr = arr.split(",");
        numArr.pop();
        window.parent.layui.element.tabChange('tab',numArr[numArr.length - 1]);
        localStorage.setItem("numArr",numArr);
    }

    var form;
    var $;
    var table;
    var layer;
    var upload;
    layui.use(['form','jquery','table','layer','upload'],function() {
        form = layui.form;
        $ = layui.jquery;
        table = layui.table;
        layer = layui.layer;
        upload = layui.upload;
        start(2);
        form.on('select(orderPaymentChannel)', function(data){
            orderPaymentChannel = data.value;
        });

        form.on('select(orderStatus)', function(data){
            orderStatus = data.value;
        });

        form.on('select(orderSource)', function(data){
            orderSource = data.value;
        });
        //$($('#btn > button > span')[0]).text("aass")
    });
    //展示账单状态数量
    $.ajax({
        url:'/ProductOrder/getStatus',
        dataType:'json',
        data:{"orderStatus":2,"orderType":2},
        success:function (data) {
            data = data.data;
            $($('#btn > button > span')[0]).text(data);
        }
    });
    $.ajax({
        url:'/ProductOrder/getStatus',
        dataType:'json',
        data:{"orderStatus":3,"orderType":2},
        success:function (data) {
            data = data.data;
            $($('#btn > button > span')[1]).text(data);
        }
    });


    $('#btn > button').on('click',function () {
        var target = $(event.target); //此处就是可以查看是那个点击的jQ对象
        if(target.text().indexOf("未付款") !== -1){
            start(2);
        }else if(target.text().indexOf("已付款") !== -1){
            start(3);
        }
    })

    //渲染
    function start(num) {
        $.ajax({
            url:'/CourseOrder/queryCourse',
            dataType:'json',
            data:{"orderStatus":num,"orderType":2},
            success:function (data) {
                data = data.data;
                console.log(data);
                startTab(data);
            }
        });
    }

    function startTab(data) {
        table.render({
            elem:'#demo',
            data:data,
            page:true,
            cols:[[
                {type:'checkbox',fixed:'left'},//复选框靠左
                {title:'序号',width:60,templet:function(data){
                        return data.LAY_TABLE_INDEX+1;
                    }},
                {field:"nickname",title:"用户昵称",align:'center'},
                {field:"phone",title:"用户手机",align:'center'},
                {title:"订单状态",align:'center',templet:function(data){
                        var state = "";
                        if(data.orderStatus == 2){
                            state = "未付款";
                        }else if(data.orderStatus == 3){
                            state = "已付款";
                        }else if(data.orderStatus == 4){
                            state = "代发货";
                        }else if(data.orderStatus == 5){
                            state = "已发货";
                        }else if(data.orderStatus == 6){
                            state = "已签收";
                        }else if(data.orderStatus == 7){
                            state = "退货申请";
                        }else if(data.orderStatus == 8){
                            state = "退货中";
                        }else if(data.orderStatus == 9){
                            state = "已退货";
                        }else if(data.orderStatus == 10){
                            state = "取消交易";
                        }
                        return state;
                    }},
                {title:"订单来源",align:'center',templet:function (data) {
                        if(data.orderSource == 2){
                            return "小程序";
                        }else {
                            return "app";
                        }
                    }},
                {field:"courseName",title:"课程名称",align:'center'},
                {field:"courseIntro",title:"课程描述",align:'center'},
                {field:"trueName",title:"主讲教师",align:'center'},
                {title:"操作",align:'center',templet:function(data){
                        return "<a class='acolor' href='javascript:see("+data.courseId+");'>查看</a>  <a class='acolor' href='javascript:delOrder("+data.orderId+");'>删除</a>";
                    }},
            ]]
        });
    }
    //查看
    function see(id) {
        $('#proId').val(id);
        layer.open({
            type:2,
            content:"/OrderModule/course-order/preview-course.html",
            area:['725px','500px']
        })
    }
    //删除
    function delOrder(id) {
        layer.open({
            type: 1,
            content: "<div style='font-size: 20px ; margin:30px  ;'>是否删除此订单?</div>",
            area: ['300px', '200px'],
            btn: ["确定", "取消"],
            yes: function (index, layero) {
                $.ajax({
                    url: '/ProductOrder/delOrder',
                    dataType: 'json',
                    data: {"orderId": id},
                    success: function (data) {
                        if (data.data) {
                            layer.msg("删除成功");
                            start(day);
                        } else {
                            layer.msg("删除失败");
                        }
                    }
                });
            }
        });
    }
    //搜索
    function selProduct() {
        $.ajax({
            url:'/CourseOrder/queryCourse',
            dataType:'json',
            data:{
                "orderPaymentChannel":orderPaymentChannel,"orderStatus":day,"orderSource":orderSource,"orderType":2,"orderStatus":day
            },
            success:function (data) {
                data = data.data;
                startTab(data);
            }
        });
    }
    var day = 2;
    $('.btnLeft > button').click(function(){
        $(this).css("background-color","#009688");
        day = $(this).index()+2;
        //2、其余兄弟去除背景颜色
        $(this).siblings('button').css("background-color","#FFFFFF");
    });

    //刷新
    function refresh() {
        window.location.reload();
    }
</script>
</body>
</html>